<template>
	<view class="wanl-feedback">

		<view class="grid col-4 grid-square flex-sub flex-center align-center" style="height: 80%;">
			<view class="bg-img" v-for="(image,index) in sendDate.images" :key="index">
				<image :src="image" @tap="previewImage(sendDate.images, index)" mode="aspectFill"></image>
				<view class="cu-tag bg-red" @tap.stop="close(index)">
					<text class='wlIcon-shanchu2'></text>
				</view>
			</view>
			<view style="border: 1px dashed #c5c5c5;" @tap="chooseImg" v-if="sendDate.images.length == 0">
				<text class="wlIcon-31paishe"></text>
			</view>
		</view>
		
		<view class="foot flex justify-center">
			<button class="cu-btn bg-green lg" @tap="send">上传</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sendDate: {
					images: []
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			chooseImg() { //选择图片
				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: "compressed",
					count: 8 - this.sendDate.images.length,
					success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.data.storage == 'local' ? null : updata.data.multipart,
												success: data => {
													this.sendDate.images.push(JSON.parse(data.data).data.fullurl);
												},
												fail: error => {
													this.$wanlshop.msg(JSON.parse(error.data).msg);
												}
											});
										}
									});
								}
							}
						});
					}
				})
			},


			close(e) {
				this.sendDate.images.splice(e, 1);
			},
			previewImage(image, index) {
				var imgArr = [];
				for (var item of image) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				}
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index],
					indicator: 'number'
				});
			},
			async send() { //发送反馈
				await uni.request({
					url: '/wanlshop/feedback/add',
					method: 'POST',
					data: this.sendDate,
					success: res => {
						this.$wanlshop.to('/pages/page/success?type=feedback&commentType=3');
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}
	.wanl-feedback {
		height: 100%;
	}
	
	.foot {
		
		.cu-btn {
			width: 420rpx !important;
			height: 72rpx !important;
			border-radius: 10rpx;
		}
	}
</style>